<template>
  <div class="link">
    <button v-if="openType" :open-type="openType">
      <div class="link-content" :class="{ 'large-height': isLargeHeight }">
        <div class="left">
          <div class="icon" :style="background" :class="{ round: isRound }" v-if="icon"></div>
          <h4>{{title}}</h4>
        </div>
        <div class="right is-link">{{addon}}</div>
      </div>
    </button>
    <div v-else class="link-content" :class="{ 'large-height': isLargeHeight }" @click="onLinkClick">
      <div class="left">
        <div class="icon" :style="background" :class="{ round: isRound }" v-if="icon"></div>
        <h4>{{title}}</h4>
      </div>
      <div class="right is-link" :class="{ color: isColor }">{{addon}}</div>
    </div>
    <hr v-if="!isLast">
  </div>
</template>

<script>
export default {
  name: 'link',
  props: {
    icon: {
      type: String,
      default: ''
    },
    title: String,
    addon: String,
    link: String,
    // 是否最后一项
    isLast: {
      type: Boolean,
      default: false
    },
    // 是否大号高度
    isLargeHeight: {
      type: Boolean,
      default: false
    },
    // 图标是否圆化
    isRound: {
      type: Boolean,
      default: false
    },
    // 使用button的open-type功能
    openType: {
      type: String,
      default: ''
    },
    // 是否标红显示右边的值
    isColor: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    background () {
      return `background-image: url(${this.icon});`
    }
  },
  methods: {
    onLinkClick () {
      if (this.link) {
        wx.navigateTo({
          url: this.link
        })
      }
      this.$emit('on-click')
    },
  },
}
</script>

<style lang="less" scoped>
.link {
  position: relative;
  padding: 0 30rpx;
  background-color: #fff;
  &:active {
    background: #d8d8d8;
  }
  &-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100rpx;
    .left {
      display: flex;
      align-items: center;
      .icon {
        width: 40rpx;
        height: 40rpx;
        margin-right: 30rpx;
        background-size: 100%;
        &.round {
          border-radius: 50% 50%;
        }
      }
      h4 {
        font-size: 32rpx;
        color: #333;
      }
    }
    .right {
      position: relative;
      font-size: 32rpx;
      color: #333;
      padding-right: 32rpx;
      &.color {
        color: #e0382f;
      }
      &.is-link::after {
        content: " ";
        display: block;
        height: 12rpx;
        width: 12rpx;
        border-width: 4rpx 4rpx 0 0;
        border-color: #cacaca;
        border-style: solid;
        transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
        position: absolute;
        top: 50%;
        right: 0;
        margin-top: -6rpx;
      }
    }
    &.large-height {
      height: 180rpx;
      .left {
        .icon {
          width: 100rpx;
          height: 100rpx;
        }
      }
    }
  }
  button {
    padding: 0;
    background-color: transparent;
    border: none;
    overflow: visible;
    &::after {
      display: none;
    }
  }
  hr {
    position: absolute;
    bottom: 0;
    left: 30rpx;
    width: calc(100% - 30rpx);
    height: 1rpx;
    background: #e6ebf0;
  }
}
</style>